﻿<template>
  <div>
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = "page_secondMainContent clear">
      <!-- 左侧表的树状列表 -->
      <div class = "page_leftContent">
        <div class = "page_leftSearchContent clear">
          <el-button @click = 'addTable' type = 'primary' size = 'mini' :disabled = 'isEdit'><i class='iconfont icon-add'></i>词典表</el-button>
          <div class = "page_leftSearchInput">
            <el-input  placeholder = "输入表名称" v-model = "filterText" prefix-icon = "el-icon-search" clearable></el-input>
          </div>
        </div>
        <!-- 下部词典列表 -->
        <div class = 'main_dic'>
          <ul class = 'dicList' v-if = 'totalDic.length'>
            <li @click = "item.dic_uid === currentTable.dic_uid ? '' : changeTable(item)" v-for = 'item in filterDic'
            :key = 'item.dic_uid' :class = "item.dic_uid === currentTable.dic_uid ? 'active' : ''">
              <span class = 'dicList_btns'>
                <el-button v-show = 'item.is_locked' type = 'text' size = 'mini' title = '解锁'
                @click.stop = 'handleUnlockTable(item.dic_uid)'><i class = 'iconfont icon-mimajiesuo01'></i></el-button>
                <el-button v-show = '!item.is_locked' type = 'text' size = 'mini' title = '锁定'
                @click.stop = 'handleLockTable(item.dic_uid)'><i class='iconfont icon-lock'></i></el-button>
                <el-button :disabled = "item.is_locked || item.is_created" type = 'text' size = 'mini' title = '编辑'
                @click.stop = 'handleEditTable(item)'><i class = 'iconfont icon-bianji'></i></el-button>
                <el-button :disabled = 'item.is_locked' type = 'text' size = 'mini' title = '删除'
                @click.stop = 'handleDeleteTable(item.dic_uid)'><i class = 'iconfont icon-shanchu'></i></el-button>
              </span>
              <div class = 'dicList_info' :title = "item.dic_desc + '(' + item.dic_name + ')'">{{item.dic_desc}}({{item.dic_name}})</div>
            </li>
          </ul>
          <div v-if = '!totalDic.length' class = 'noTable'>
            暂无词典表，请点击左上角按钮新增词典表
          </div>
          <div v-if = 'totalDic.length && !filterDic.length' class = 'noTable'>
            没有找到符合要求的词典表
          </div>
        </div>
        <div class = 'page_leftBottomBtns' v-show = 'filterDic.length'>
          <el-button  type = "info" @click = "dropTable" v-show = 'currentTable.is_created'>删 表</el-button>
          <el-button type = "primary" @click = "createTable">建 表</el-button>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class = "page_rightContent" v-show = 'totalDic.length && currentTable.is_created'>
        <!-- 检索部分 -->
        <div class = 'page_searchContent'>
          <el-input placeholder = "请输入编号进行检索" clearable v-model = 'searchKey' prefix-icon = "el-icon-search"></el-input>
        </div>
        <!-- 表格部分 -->
        <div class = 'page_tableContent'>
          <el-table :data = 'table.tableData' style = 'width:100%' stripe border
          @selection-change = "handleSelectionChange" empty-text = '暂无数据，请点击右上方添加数据按钮进行添加'>
            <el-table-column type = "selection" width = "55" align = 'center'></el-table-column>
            <el-table-column align = 'center' v-for = 'item in table.tableColumn' :key = 'item.indexName' :label = 'item.text'>
              <template slot-scope = 'scope'>
                <el-input :disabled = "operationType !== 'edit' && (scope.row.newData !== 'newData')" v-model = 'scope.row[item.indexName]' placeholder = "请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label = "操作" align = "center" width = '60'>
              <template slot-scope = "scope">
                <el-button type = 'text' @click = "handleSingleDelete(scope.row, scope.$index)"
                :disabled = "operationType === 'edit' || (operationType === 'add' && scope.row.newData !== 'newData')"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class='page_bottomContent'>
          <div class='page_btnsContent'>
            <el-button v-show = "operationType !== 'add' && operationType !== 'edit'" @click = 'handlemultipleDelete' type = "primary">删除数据</el-button>
            <el-button v-show = "operationType !== 'edit'" type = "primary" @click = 'addTableData'>添加数据</el-button>
            <el-button v-show = "operationType !== 'add' && operationType !== 'edit'" type = "primary" @click = 'editTableData'>编辑数据</el-button>
            <el-button v-show = "operationType === 'add' || operationType === 'edit'" @click = "resetTableData" type = "primary" >取&nbsp;&nbsp;&nbsp;&nbsp;消</el-button>
            <el-button v-show = "operationType === 'add' || operationType === 'edit'" type = "primary" @click = "submitTableData">确&nbsp;&nbsp;&nbsp;&nbsp;定</el-button>
          </div>
          <div class = 'page_paginationContent'>
            <el-pagination
              background
              @size-change = "handleSizeChange"
              @current-change = "handleCurrentChange"
              :current-page.sync = "currentPage"
              :page-size = 'pageSize'
              :pager-count = "5"
              :page-sizes = "[10, 25, 50, 100]"
              layout = "total, sizes, prev, pager, next"
              :total = 'totalLength'>
            </el-pagination>
          </div>
        </div>
      </div>
      <div v-show = 'totalDic.length && (!currentTable.is_created)' class = 'page_rightContent'>
        该词典表还未创建，暂时无法获取其数据内容，请点击左侧下方的建表按钮进行创建
      </div>
    </div>
    <!-- 新增词典表的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = "closeDialog"
    :close-on-click-modal = 'false'>
      <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules'>
        <el-form-item label = "词典表名称：" prop = 'name'>
          <el-row>
            <el-col :span = "8">
              <el-form-item>
                <el-input v-model = "ruleForm.basicName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col class = "line" :span = "2">-</el-col>
            <el-col :span = "14">
              <el-form-item>
                <el-input v-model = "ruleForm.name" placeholder = "请输入词典表名称" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label = "词典表描述：">
          <el-input v-model = 'ruleForm.desc' placeholder = "请输入词典表描述" clearable></el-input>
        </el-form-item>
        <el-form-item label = "是否为树结构：">
            <el-radio-group v-model = "ruleForm.istree">
              <el-radio label = "是"></el-radio>
              <el-radio label = "否"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = 'info' @click = "resetForm ('ruleForm')">取 消</el-button>
          <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script src='./maintainDic.js'></script>
